<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>表单验证</h1>

    <form id="login" method="post" action="http://www.baidu.com">
        用户名：<input type="text" name="username" placeholder="用户名" /><br />
        邮箱：<input type="text" name="email" placeholder="邮箱" /><br />
        密码：<input type="password" name="pwd" placeholder="请输入密码" /><br />
        确认密码：<input type="password" name="pwd2" placeholder="请输入密码" /><br />

        性别：<input type="radio" name="sex" value="1" />男
        <input type="radio" name="sex" value="0" />女<br />

        爱好：<input type="checkbox" name="love" value="1" />爱好1
        <input type="checkbox" name="love" value="2" />爱好2
        <input type="checkbox" name="love" value="3" />爱好3
        <input type="checkbox" name="love" value="4" />爱好4<br />

        选择城市：
        <select name="city">
            <option value="">请选择</option>
            <option value="gz">广州</option>
            <option value="sz">深圳</option>
            <option value="bj">北京</option>
        </select><br />

        个人简介：
        <textarea name="content"></textarea><br />

        <button type="submit">提交</button>
    </form>
</body>
</html>

<script src="./jquery.min.js"></script>

<script>
   
    var login = document.getElementById('login')

    login.onsubmit = function()
    {
        
        var username = $("input[name=username]").val()

        
        username = $.trim(username)

        if(username.length <= 0)
        {
            alert('请输入用户名')
            return false
        }

       
        var reg = /\w+@\w+\.[com|cn|net|org]/

        var email = $.trim($("input[name=email]").val())


      
        if(!reg.test(email))
        {
            alert("邮箱格式有误，请重新输入")
            return false
        }


        
        var pwd = $.trim($("input[name=pwd]").val())
        var pwd2 = $.trim($("input[name=pwd2]").val())

        if(pwd.length <= 0)
        {
            alert('请输入密码')
            return false
        }
        
        if(pwd2.length <= 0)
        {
            alert('请输入确认密码')
            return false
        }

        if(pwd != pwd2)
        {
            alert('密码和确认密码不一致')
            return false
        }

        var sex = $("input[name=sex]")
        var sex1 = sex.eq(0).prop("checked")
        var sex2 = sex.eq(1).prop("checked")

        if(!sex1 && !sex2)
        {
            alert("请选择性别")
            return false
        }


      
        var loves = $("input[name=love]")
        var total = 0  
        for(var i = 0; i < loves.length; i++)
        {
           
            loves.eq(i).prop("checked") && total++
        }

        if(total <= 0)
        {
            alert('请选择爱好')
            return false
        }

      
        var city = $.trim($("select[name=city]").val())

        if(!city)
        {
            alert("请选择城市")
            return false
        }

    
        var content = $.trim($("textarea[name=content]").val())

        if(content.length <= 0)
        {
            alert("请输入个人简介")
            return false
        }

    }
</script>